import Image from "next/image";
import visualizerImg from "../public/assets/visualizer2.png";

## Scrollytelling Visualizer

<Image
  src={visualizerImg}
  quality={100}
  sizes="(max-width: 767px) 100vw, 1200px"
  placeholder="blur"
  alt="Hello"
/>

The **Scrollytelling Visualizer** is designed to help in debugging created animations. It provides a visual representation of how anims are positioned in the timeline and their states, allowing to understand them more easily.

- The visualizer is contained within a draggable panel that can be moved around the screen for convenience.
- It can handle multiple GSAP timelines, which can be switched using a dropdown menu.
- The `debug` prop on the [`<Root>`](/api-reference/root) component can be used to handle the visualizer and label debugged timelines (check `debug` [props](/api-reference/root#debug-props)).
